<template>
  <div class="goods">
    <van-sidebar v-model="activeKey">
      <van-sidebar-item
        v-for="(item, key) in asidelist"
        :title="asidelist[key].name"
        :key="key"
      />
    </van-sidebar>
    <ul>
      <li v-for="(item, key) in hotsellers" :key="key">
        <img src="item.image" alt="" />
        <!-- <p>
          {{ item.info }}
        </p> -->
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "goods",
  data() {
    return {
      activeKey: 0,
      asidelist: [],
      hotsellers: []
    };
  },
  mounted() {
    this.$axios.get("/api/data.json").then(res => {
      console.log(res);
      this.asidelist = res.data.goods;
      this.hotsellers = res.data.goods[0].foods;
    });
  }
};
</script>

<style lang="scss" scoped>
.goods {
  width: 100%;
  display: flex;
}
</style>